<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style>
	*{
        margin:0;
    }
     canvas{
        display: block;
        margin:0 auto;
        border:1px red solid;
    }
</style>
</head>
<body>
	<canvas id="canvas" width="1366" height="800"></canvas>
</body>
<script>
	var	canvas = document.querySelector("#canvas");
	var ctc = canvas.getContext("2d");
	function random(a,b){
		return Math.ceil(Math.random()*(b-a)+a);
	}

	for (var i = 0; i < 100; i++) {
		var x = random(30,1236);
		var y = random(30,770);
        var r = random(5,30);
        var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
        drawCycle(x,y,r,color);
	}
	
    function drawCycle(x,y,z,color){
    	ctc.beginPath();
    	ctc.arc(x,y,r,0,Math.PI*2);
    	ctc.fillStyle = color;
    	ctc.fill();
    	ctc.closePath();
    }
	 </script>
    }
</html>